<template>
  <el-form ref="formRef" :model="dept" label-width="120px">
    <el-form-item label="部门领导">
      <el-input v-model="dept.leader"></el-input>
    </el-form-item>
    <el-form-item label="上级部门">
      <el-cascader :options="deptes" :show-all-levels="false" :props="props" v-model="dept.parentId" filterable/>
    </el-form-item>
    <el-form-item label="部门名称">
      <el-input v-model="dept.deptName"></el-input>
    </el-form-item>
    <el-form-item label="备注">
      <el-input v-model="dept.remarks"></el-input>
    </el-form-item>
    <el-form-item label="状态">
      <el-switch v-model="dept.status"
                 active-text="启用"
                 inactive-text="停用"
                 active-color="#13ce66"
                 inactive-color="#ff4949"
                 :active-value=1
                 :inactive-value=0 />
    </el-form-item>
    <el-form-item>
      <el-button @click="add()">添加</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {addDept,getAllDept,deptChildRecursion} from "@/api/dept";
export default {
  name: "AddDept",
  data() {
    return {
      props:{
        label:'deptName',
        value:'id',
        checkStrictly:true
      },
      deptes:[],
      dept:{
        leader:'',
        parentId:'',
        deptName:'',
        remarks:'',
        status:0,
      },
    }
  },
  props: {
    parentId:{
      type: Number,
      default:-1
    }
  },
  mounted() {
    this.getDept();
  },
  methods:{
    async getDept() {
      const t = await getAllDept();
      const a = deptChildRecursion(t.data.data)
      this.deptes = a;
    },
    async add() {
      this.dept.parentId = this.dept.parentId.slice(-1)[0]
      await addDept(this.dept)
    }
  },
  watch:{
    parentId(newId) {
      console.log(newId)
      this.dept.parentId = newId;
    }
  }
}
</script>

<style scoped>

</style>